<template>
  <div>
    <div class="wrap">
      <h3>
        账户余额 :
        <span>¥{{tit}}</span>
      </h3>
      <div v-show="show">
        <div class="money">
          <span>请选择充值金额 :</span>
          <button @click="change(index)" :class="{'btn':active==index}" v-for="(item,index) in arr">{{item.tit1}}元</button>
        </div>

        <div class="bot">
          <h4>充值有礼</h4>

          <div class="song" v-for="item1 in arr1">
            <p>{{item1.tit2}}</p>
            <div class="song-left">
              <img :src="item1.url"/>
            </div>
            <div class="song-right">
              <p>{{item1.tit3}}</p>
              <span>{{item1.tit4}}</span>
            </div>
          </div>
        </div>
        <button class="btn2" @click="chong()">立即充值</button>
      </div>
      <p class="pp" v-show="show1">暂无数据,请登录</p>

    </div>
  </div>

</template>

<script>
  import axios from 'axios'
    export default {
        name: "Chongzhi",
      data(){
          return{
            active:0,
            tit:0,
            tit2:500,
            show:true,
            show1:false,
            arr:[
              {tit1:500},
              {tit1:1000},
              {tit1:2000},
            ],
            arr1:[
              {tit2:'充500元送 :','url':'../../../static/zwf/mine/orange.png',tit3:'新疆哈密瓜25kg',tit4:'价值 ：500'},
              {tit2:'充1000元送 :','url':'../../../static/zwf/mine/orange.png',tit3:'新疆哈密瓜30kg',tit4:'价值 ：700'},
            ]
          }
      },
      methods:{
          change(i){
            this.active=i;
            this.tit2=this.arr[i].tit1;
          },

          chong(){
            if(this.$store.state.phone==''){
              alert("您还没有登录,请登录")
            }else{
              this.tit=Number(this.tit2)+Number(this.tit)
              console.log(this.tit)
            }
          }
      },
      mounted(){
        var params=new URLSearchParams();
        params.append('iphone',this.$store.state.phone);

        axios.post('/api/firday/userinfo.php',params).then(res=>{
          var arr1=res.data;
          this.tit=arr1[0].money
        })

        if(this.$store.state.phone==''){
          this.show=false;
          this.show1=true;
        }else{
          this.show=true;
          this.show1=false;
        }

      }

    }
</script>

<style scoped>
.wrap{
  width: 1083px;
  height: 623px;
  border: 1px solid #e7e7e7;
}
.wrap h3{
   width: 1063px;
   height: 56px;
   line-height: 56px;
   padding-left: 20px;
   font-size: 18px;
   color: #212121;
   border-bottom: 1px solid #e7e7e7;
 }
.wrap h3 span{
  color: #e85e35;
}

.money{
    width: 1003px;
    height: 70px;
    padding: 40px;
    font-size: 18px;
}
.money span{
  display: block;
  margin-bottom: 20px;
  color: #2a2a2a;
}
.money button{
  width: 113px;
  height: 32px;
  border: 1px solid #d4d4d4;
  margin-right: 37px;
  background: #fff;
  color: #2a2a2a;
  cursor: pointer;
}
  .money .btn{
    border-color: #64a130;
  }
.bot{
  width: 1003px;
  height: 230px;
  padding: 0 40px 40px;
}
.bot>h4{
  width: 1043px;
  color: #f18a11;
  font-size: 18px;
  margin-bottom: 20px;
}
.song{
  float: left;
  width: 315px;
  height: 148px;
  border: 1px solid #d4d4d4;
  margin-right: 40px;
  padding: 20px;
  font-size: 18px;
  color: #2a2a2a;
}
.song>p{
  margin-bottom: 20px;
}
.song-left{
  float: left;
  width: 160px;
  height: 120px;
  margin-right: 10px;
}
.song-left img{
  width: 150px;
  height: 120px;
}
.song-right{
  float: left;
}
.song-right p{
  margin-top: 10px;
  margin-bottom: 18px;
}

.btn2{
  width: 150px;
  height: 50px;
  background: #f08200;
  color: #fff;
  font-size: 18px;
  border-radius: 5px;
  margin-left: 40px;
  cursor: pointer;
}

.pp{
  width: 1083px;
  height: 46px;
  line-height: 46px;
  border-bottom: 1px solid #e9e9e9;
  text-align: center;
}

</style>
